<template>
  <div>
    <el-table
      :data="props.table.data"
      style="width: 100%"
      :size="tableSize"
      stripe
      border
      default-expand-all
      :row-key="props.table.rowKey ? props.table.rowKey : undefined"
    >
      <el-table-column
        v-for="col in filterdFields"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :align="col.tableMeta?.align || 'center'"
        :width="col.tableMeta?.width"
        :type="col.tableMeta?.type"
        :show-overflow-tooltip="col.tableMeta?.showOverflowTooltip"
        :formatter="col.tableMeta?.formatter"
      >
        <template #default="scope">
          <div v-if="col.tableMeta?.contentType === 'tag'">
            <el-tag
              :type="col.tableMeta?.tagMapper?.[scope.row[col.prop]]?.type"
              effect="dark"
              size="default"
            >{{ col.tableMeta?.tagMapper?.[scope.row[col.prop]]?.text || scope.row[col.prop] }}</el-tag>
          </div>
          <div v-else-if="col.tableMeta?.contentType === 'tags'">
            <el-tag
              v-for="tag in scope.row[col.prop]"
              :key="tag"
              effect="plain"
              size="default"
            >{{ tag }}</el-tag>
          </div>
          <div v-else-if="col.tableMeta?.contentType === 'icon' && scope.row[col.prop]">
            <el-icon size="large">
              <component :is="scope.row[col.prop]" />
            </el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="props.table.onTableDataDelete && props.table.onTableDataEdit"
        prop="operation"
        label="操作"
        width="160"
        align='center'
      >
        <template #default="scope">
          <!-- <el-button-group size="small"> -->
          <div style="display:flex ;align-items: center;justify-content: center;">
            <el-button
              v-permission="[props.table.editPermissionCode ? props.table.editPermissionCode : '']"
              type="primary"
              text
              @click="props.table.onTableDataEdit(scope.$index, scope.row)"
            >
              <template #icon>
                <Edit />
              </template></el-button>
            <div
              v-for="(op, index) in props.table.extraOperations"
              style="display: flex;align-items: center;"
              :key="index"
            >
              <el-divider
                direction="vertical"
                :key="index"
              />
              <el-button
                v-permission="[op.permissionCode ? op.permissionCode : '']"
                :key="index"
                type="success"
                text
                @click="op.onDataOperation(scope.$index, scope.row)"
              >
                <template #icon>
                  <component :is="op.icon" />
                </template></el-button>
            </div>
            <el-divider direction="vertical" />
            <el-popconfirm
              title="确认删除?"
              confirm-button-text="确认"
              cancel-button-text="取消"
              cancel-button-type="info"
              :hide-after=10
              @confirm="props.table.onTableDataDelete(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button
                  v-permission="[props.table.deletePermissionCode ? props.table.deletePermissionCode : '']"
                  type="danger"
                  text
                >
                  <template #icon>
                    <Delete />
                  </template></el-button>
              </template>
            </el-popconfirm>
          </div>
          <!-- </el-button-group> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="props.table.pagination"
      v-model:page-size="props.table.pagination.pageSize"
      :page-sizes="props.table.pagination.pageSizes"
      :background="true"
      :layout="props.table.pagination.layout"
      :total="props.table.pagination.total"
      v-model:current-page="props.table.pagination.currentPage"
      size="default"
      @current-change="props.table.pagination.pageChange"
      @size-change="props.table.pagination.pageSizeChange"
    />
  </div>
</template>

<script lang="ts" setup>
import type { TableFieldMeta } from '@/common/type/field'
import type { PagTable, PureTable } from '@/common/type/table'
import Logger from '@/util/log'
import { onMounted, ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue' // 导入图标组件

export type DataColumn = {
  prop: string, // 列属性名
  label: string, // 列标题
  tableMeta: TableFieldMeta, // 列元数据
}

const props = defineProps({
  table: {
    type: Object as () => PureTable<any>,
    required: true,
  },
  dataColumns: {
    type: Array as () => DataColumn[],
    required: true,
  },
  tableSize: {
    type: String as () => 'large' | 'default' | 'small',
    default: 'large',
  }
})
const filterdFields = ref<DataColumn[]>([])

onMounted(() => {
  filterdFields.value = props.dataColumns.filter(field => !(field.tableMeta?.hideInTable))
  // Logger.info('filterdFields', filterdFields.value)
  props.table.initTableData()
})

</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end
}

.el-table .el-tag {
  margin: 2px 2px;
}

:deep(.el-button) {
  padding: 0 0px;
  font-size: 20px;
  height: 24px;
}
</style>